<!-- 内容/列表 -->
<template>
    <div class="row-content">
        <template v-if="['album'].includes(widgetType)">
            <album-content :widget="widget" />
        </template>
        <template v-else-if="['list'].includes(widgetType)">
            <list-content :widget="widget" />
        </template>
        <template v-else-if="['carousel'].includes(widgetType)">
            <carousel-content :widget="widget" />
        </template>
        <template v-else-if="['announce'].includes(widgetType)">
            <announce-content :widget="widget" />
        </template>
        <template v-else-if="['nav-icon'].includes(widgetType)">
            <nav-icon-content :widget="widget" />
        </template>
        <template v-else-if="['suspension', 'new-suspension'].includes(widgetType)">
            <suspension-content :widget="widget" />
        </template>
        <template v-else-if="['new-classify'].includes(widgetType)">
            <new-classify-content :widget="widget" />
        </template>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import AlbumContent from './components/album-content'
import ListContent from './components/list-content'
import CarouselContent from './components/carousel-content'
import AnnounceContent from './components/announce-content'
import NavIconContent from './components/nav-icon-content'
import SuspensionContent from './components/suspension-content'
import NewClassifyContent from './components/new-classify-content'
export default defineComponent({
    name: 'RowContent',
    components: {
        AlbumContent,
        ListContent,
        CarouselContent,
        AnnounceContent,
        NavIconContent,
        SuspensionContent,
        NewClassifyContent
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)
        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        return {
            widget,
            widgetType
        }
    }
})
</script>

<style lang="less" scoped>
// .row-content {
//     ::v-deep(.row-content-collapse) {
//         border: none;
//         .el-collapse-item {
//             box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
//             border: 1px solid var(--edit-border-color);
//             & + .el-collapse-item {
//                 margin-top: 10px;
//             }
//             .el-collapse-item__header {
//                 background-color: inherit !important;
//                 border-bottom-color: transparent !important;
//                 &.is-active {
//                     border-bottom: 1px solid var(--edit-border-color) !important;
//                 }
//             }
//         }
//     }
// }
</style>